<template>
  <div class="application-log" id="application-log">
    <span class="table-blue" @click="back">
      <i class="iconfont icon-left"></i>返回
    </span>
    <div class="application-log-content">
      <Row>
        <i-col span="10">
          <div class="message"><span>message:</span>&nbsp;{{logList.message}}</div>
          <div class="commit"><span>commit:</span>&nbsp;{{logList.commit}}</div>
          <div class="branch"><span>branch:</span>&nbsp;{{logList.branch}}</div>
          <div class="step" v-if="logList.procs">
            <p v-for="(item,index) in logList.procs[0].children" :key="index" @click="chooseLog(item)" :class="{active:pid === item.pid}">
              <span>{{item.name}}</span>
              <i>{{item.state}}</i>
            </p>
          </div>
        </i-col>
        <i-col span="14">
          <div class="log-detail">
            <p v-for="(item,index) in logDetail" :key="index">
              <span>{{index+1}}&nbsp;</span>
              <span>{{item.out}}</span>
            </p>
          </div>
        </i-col>
      </Row>
    <!-- <div class="toTop" @click="toTop()">
        <i></i>
        <p>回到顶部</p>
    </div>     -->
    </div>
  </div>
</template>

<script>
import { getBuildLogList, getBuildLogdetail } from 'http/api/application';
export default {
  name: 'AppBuildLog',
  data () {
    return {
      pid: '',
      logList: [],
      logDetail: []
    };
  },

  methods: {
    chooseLog (item) {
      this.pid = item.pid;
      let param = {
        appId: this.$route.query.appId,
        buildNumber: this.$route.query.buildNumber,
        pid: item.pid
      };
      getBuildLogdetail(param).then(res => {
        if (res) {
          this.logDetail = res.data;
        }
      })
        .catch(err => {
          this.$Message.error(err);
        })
    },
    back () {
      this.$router.push({ path: '/home/application/appVersion?id=' + this.$route.query.id })
    },
    getList () {
      let param = {
        appId: this.$route.query.appId,
        buildNumber: this.$route.query.buildNumber
      };
      getBuildLogList(param).then(res => {
        if (res) {
          this.logList = res.data;
          this.chooseLog(this.logList.procs[0].children[0]);
        }
      })
        .catch(err => {
          this.$Message.error(err);
        })
    }
  },
  mounted () {
    this.getList();
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.application-log {
  padding: 20px;
  .application-log-content {
    margin: 20px 0;
    .log-detail{
        margin-left:20px;
        p{
            padding:5px 0;
        }
    }
    .toTop{
        i{
            display:inline-block;
        width:40px;
        height:20px;
        background:url('') center no-repeat;
        }
        cursor: pointer;
        position: fixed;
        left:17.5%;
        bottom:25px;
    }
    .message,.commit,.branch,.step{
        border-bottom: 1px solid #eceff1;
        font-size: 14px;
        line-height: 20px;
        margin: 20px 0px;
        padding: 0px 10px;
        span{
            color:#666;
            font-weight: 600;
        }
    }
    .message{
        padding:0 20px 20px 20px;
    }
    .commit{
        padding:0 20px 20px 20px;
    }
    .branch{
        padding:0 20px 20px 20px;
    }
    .step{
        p{
            padding:10px 10px;
            cursor: pointer;
            &.active{
                background:#eceff1;
            }
            i{
                font-style: normal;
                float:right;
            }
        }
        p:hover{
            background:#eceff1;
        }

    }
  }
}
</style>

<style lang="less">
</style>
